import { IFormApi } from '@/components/form/BmForm'
import { BmInput } from '@/components/form/BmInput'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { FC } from 'react'

export const Aliyun: FC<{ form: IFormApi<Record<string, any>> }> = ({ form }) => {
  return (
    <main className="grid grid-cols-3 gap-3">
      <Card>
        <CardHeader>
          <CardTitle>阿里云基本配置</CardTitle>
        </CardHeader>
        <CardContent>
          <BmInput label="AccessKey ID" fieldName={'system.aliyun_accesskey_id'} formObject={form} />
          <BmInput label="AccessKey SECRET" fieldName={'system.aliyun_accesskey_secret'} formObject={form} />
          <BmInput label="OSS Endpoint" fieldName={'system.aliyun_oss_endpoint'} formObject={form} />
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>阿里云视频</CardTitle>
        </CardHeader>
        <CardContent>
          <BmInput label="OSS Bucket" fieldName={'system.aliyun_video_oss_bucket'} formObject={form} />
          <BmInput label="CDN 域名" fieldName={'system.aliyun_video_cdn_domain'} formObject={form} />
          <BmInput label="CDN 鉴权主KEY" fieldName={'system.aliyun_video_cdn_auth_key'} formObject={form} />
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>阿里云图片</CardTitle>
        </CardHeader>
        <CardContent>
          <BmInput label="OSS Bucket" fieldName={'system.aliyun_image_oss_bucket'} formObject={form} />
          <BmInput label="CDN 域名" fieldName={'system.aliyun_image_cdn_domain'} formObject={form} />
        </CardContent>
      </Card>
    </main>
  )
}
